<template>
<!-- dialog-waybill-expense begin -->
<el-dialog
  width="1218px"
  class="dialog-waybill-expense"
  title="客户运费"
  :append-to-body="true"
  :close-on-click-modal="false"
  :visible.sync="dialogShow"
  @close="onHide()">
  <div class="right-toolbar">
    <div class="opera-bar">
      <el-button type="primary" @click="handleShow('new')">新增</el-button>
      <el-button type="primary" plain @click="handleShow('edit')">修改</el-button>
      <el-button type="danger" plain @click="handleDelete()">删除</el-button>
    </div>
  </div>
  <!-- table begin -->
  <el-table ref="dialogTable" class="dialog-table mt10"
    :height="540"
    :data="tableData" :row-key="getRowKeys"
    @selection-change="tableSelect" border stripe>
    <el-table-column type="selection" width="28" fixed></el-table-column>
    <el-table-column show-overflow-tooltip prop="priceType" label="费用类型" align="center" min-width="98">
      <template slot-scope="scope">
        <span>{{ scope.row.priceType | filterDict(dict.type['waybill_expense_type']) }}</span>
      </template>
    </el-table-column>
    <el-table-column show-overflow-tooltip prop="priceAmount" label="计费运量" align="center" min-width="75"></el-table-column>
    <el-table-column show-overflow-tooltip prop="priceUnit" label="计费单价" align="center" min-width="75"></el-table-column>
    <el-table-column show-overflow-tooltip prop="priceCount" label="费用合计" align="center" min-width="75"></el-table-column>
    <el-table-column show-overflow-tooltip prop="baseId" label="依据" align="center" min-width="108"></el-table-column>
    <el-table-column show-overflow-tooltip prop="partitionSchemeName" label="分区方案" align="center" min-width="128"></el-table-column>
    <el-table-column show-overflow-tooltip prop="partitionName" label="分区" align="center" min-width="118"></el-table-column>
    <el-table-column show-overflow-tooltip prop="remark" label="备注" align="center" min-width="252"></el-table-column>
    <el-table-column show-overflow-tooltip prop="createBy" label="创建人" align="center" min-width="78"></el-table-column>
    <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" align="center" min-width="136"></el-table-column>
  </el-table>
  <!-- table begin -->
  <div slot="footer" class="dialog-footer">
    <el-button size="small" @click="dialogShow = false">关闭</el-button>
  </div>

  <!-- dialog-expense-detail begin -->
  <dialog-expense-detail :show.sync="dialogExpenseDetail" :status="dialogStatus" :id="expenseId" :orderId="id" @refresh="getPageData" />
  <!-- dialog-expense-detail end -->
</el-dialog>
<!-- dialog-waybill-expense end -->
</template>

<script>
import mixin from '@/utils/filtermixin/mixin';
import DialogExpenseDetail from './dialog-expense-detail';
import * as API_Expense from '@/api/aliorder/expense';

export default {
  name: 'dialog-waybill-expense',
  dicts: ['waybill_expense_type'],
  components: {
    DialogExpenseDetail
  },
  mixins: [mixin],
  props: {
    // 弹层显示
    show: {
      type: Boolean,
      default: false
    },
    // 订单 ID
    id: {
      type: [String, Number],
      default: undefined
    }
  },
  data () {
    return {
      dialogShow: false,
      tableData: [],
      // 获取row的key值
      getRowKeys (row) {
        return row.id;
      },
      selectedIds: [],
      selectedRows: [],

      // 添加费用弹层
      dialogExpenseDetail: false,
      dialogStatus: undefined,
      expenseId: undefined
    };
  },
  watch: {
    show (_newVal) {
      this.dialogShow = _newVal;
      if (_newVal) {
        this.getPageData();
      };
    }
  },
  methods: {
    /**
      * @date 2025/07/13
      * @author wolfMan
      * @description {关闭弹层}
    */
    onHide () {
      this.$emit('update:show', false);
    },
    /**
      * @date 2025/07/13
      * @author wolfMan
      * @description {获取页面数据}
    */
    getPageData () {
      let _params = {
        orderId: this.id
      };
      API_Expense.getListService(_params).then(response => {
        this.tableData = response.rows || [];
      });
    },
    /**
      * @date 2025/07/13
      * @author wolfMan
      * @description {表格行选中}
    */
    tableSelect(_row) {
      this.selectedIds = _row.map((item) => item.id);
      this.selectedRows = _row;
    },
    /**
      * @date 2025/07/14
      * @author wolfMan
      * @description {新增/修改费用}
    */
    handleShow (_type) {
      if (_type === 'edit') {
        if (!this.selectedIds.length) {
          this.$msgWarning('请选择需要修改的费用项！');
          return;
        } else if (this.selectedIds.length > 1) {
          this.$msgWarning('单次只能修改一个费用项！');
          return;
        } else {
          this.expenseId = this.selectedIds[0];
        };
      };
      this.dialogStatus = _type;
      this.dialogExpenseDetail = true;
    },
    /**
      * @date 2025/07/14
      * @author wolfMan
      * @description {删除费用}
    */
    handleDelete () {
      if (this.selectedIds.length === 0) {
        this.$msgWarning('请先选择要删除的费用！');
        return;
      };
      this.$modal.confirm('是否确认删除已选中的费用项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        API_Expense.delService(this.selectedIds).then(() => {
          this.dialogVisible =false;
          this.$msgSuccess('删除成功');
          this.getPageData();
        });
      }).catch(() => {
        console.log('取消');
      });
    }
  }
};
</script>